<template>
  <div>
    <div class="node" v-has="{action: 'iot:seat:list', effect: 'move'}">
    <div :class="[$style.search_box, $style.topSelect]">
    </div>
    <Panel title="实时占位列表" :intro="intro">
      <div slot='ext' :class="$style.examine">
        <el-button size="small" plain  icon="el-icon-refresh" @click="getQuerydata">刷新</el-button>        
      </div>
    <TableEncapsulation
      slot="body"
      :tableConfig="tableConfig"
      :tableData="tableData"
    >
    </TableEncapsulation>
    </Panel>
    </div>
    <div style="display: none;width:100%;height:100%;margin: auto;" v-has="{action: 'iot:seat:list', effect: 'noPremiss'}">
      <NoPremission></NoPremission>
    </div>
  </div>
</template>
<script>
import request from "@/tools/request";
import Panel from "@/components/Panel";
import TableEncapsulation from "@/components/TableEncapsulation";
import TablePager from "@/components/Pager";
import SearchInput from "@/components/SearchInput";
import { numToStringTime } from "@/tools/array";
export default {
  name: "orderSeat",
  components: {
    TableEncapsulation,
    TablePager,
    Panel,
    SearchInput
  },
  data() {
    return {
      intro:{
        title:'实时占位订单-介绍文档',
        content: `<ul><li>当前正在占位中的充电订单</li></ul><p><br></p>`
      },
      tableData: [],
      operation: false,
    };
  },
  created() {
    this.getQuerydata();
  },
  computed: {
    tableConfig () {
      return {
        selection: true,
        columnConfig: [
          {
            label: "金额",
            type: "text",
            prop: "money",
            align: "center"
          },
          {
            label: "优惠券抵扣金额",
            type: "text",
            prop: "couponMoney",
            align: "center"
          },
          {
            label: "实收金额",
            type: "text",
            prop: "actualMoney",
            align: "center",
          },
          {
            label: "创建时间",
            type: "text",
            prop: "insertTime",
            align: "center",
          },
        ].filter(Boolean)
        }
    }
  },
  methods: {
    async getQuerydata() {
      const res = await request({
        url: "/manage/vip/order/query",
        method: "POST",
        data: {current: 1, size: 10}
      });
      let list = res.data.records
      list.map(item => {
          //  if(item.seatTime){
          //       item.seatTime = numToStringTime(item.seatTime)
          //   }
          //   return item
      })
      this.tableData =list
    },
  }
}
</script>
<style lang='scss' module>
.examine{
    display: flex;
    align-items: center;
    :global{
        div{
            color: #fff;
            padding: 10px;
            margin: 0 10px;
            border-radius: 2px;
            font-size: 14px;
            cursor: pointer;
            min-width: 60px;
            text-align: center;
        }
        .adopt{
                background: #409EFF;
        }
    }
}
img {
    width: 88px;
    border-radius: 5px;
}
.search_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  :global {
    .el-input {
      width: 150px;
    }
    .el-select {
      .el-input {
        width: 90px;
      }
    }
    .el-input__icon {
      line-height: 27px;
    }
    .el-range-separator{
      line-height: 26px;
    }
  }
}

.topSelect {
  background-color: white;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
}
</style>